<!--
 * @Author: awada 10254500+awadaawada@user.noreply.gitee.com
 * @Date: 2022-10-12 14:30:47
 * @LastEditors: awada 10254500+awadaawada@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 19:26:03
 * @FilePath: \JavaScriptd:\Briup\实训三\项目\第三个项目\点单项目\HeyTea_project\HeyTea-ui\src\views\dashboard\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="oneHead">
      <div>
        <div id="Sales" class="xiaoTitle">销售额 SALES</div>
        <div class="oneContent">
          $1200
          <span class="text-green d-inline-flex align-items-center lh-1">
            7%
            <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" />
            </svg>

          </span>
          <div class="s_chart">
            <zhexianChart />
          </div>
        </div>
      </div>
      <div>
        <div class="xiaoTitle">用户量 USERS</div>
        <div id="twoContent" class="oneContent">1856位
          <span class="text-green d-inline-flex align-items-center lh-1">
            5%
            <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><polyline points="3 17 9 11 13 15 21 7" /><polyline points="14 7 21 7 21 14" />
            </svg>

          </span>

          <div
            class="u_chart"
            style="margin-top: -99px;
     margin-left: 68px;"
          >

            <user_chart />

          </div>
          <div />
        </div>
      </div>
      <div>
        <div class="xiaoTitle">订单量 ORDERS</div>
        <div id="threeContent" class="oneContent">
          105万单
        </div>
        <div
          class="b_chart"
          style="margin-top: -174px;
    width: 62%;
    margin-left: 97px;"
        >
          <yibiao_chart />
        </div>
      </div>
    </div>

    <div class="two">

      <div class="twoLeft">
        <span>其他订单趋势</span>
        <div class="dingdanqushi_chart" style="margin-top: 14px;">
          <dingdan_chart />
        </div>

      </div>

      <div class="twoRight">
        <div class="twoRight_one"><span>用户类型</span>
          <div class="yibiaoChart" style=" width: 35%;margin-top: -119px;margin-left: 178px;">
            <bin_chart />
          </div>
        </div>
        <div class="towRight_two"><span>订单评价</span>
          <div class="pingjia_chart" style="margin: auto;margin-top:24px;width: 90%;">
            <pingjia_chart />
          </div>

        </div>
      </div>

    </div>

    <div class="threeButtom">
      <span>实时客流量</span>
      <div>
        <bottom_chart />

      </div>
    </div>

  </div>

</template>
<script>
import zhexianChart from '@/pages/components/zhexian_Chart.vue'
import user_chart from '@/pages/components/user_chart.vue'
import dingdan_chart from '@/pages/components/dingdan_chart.vue'
import yibiao_chart from '@/pages/components/yibiao_chart.vue'
import bottom_chart from '@/pages/components/bottom_chart.vue'
// import data from '../pdf/content'
import bin_chart from '@/pages/components/bin_chart.vue'
import pingjia_chart from '@/pages/components/pingjia_chart.vue'

export default {
  components: {
    zhexianChart,
    user_chart,
    dingdan_chart,
    yibiao_chart,
    bottom_chart,
    bin_chart,
    pingjia_chart
  },
  data() {
    return {}
  }
}
</script>
<style lang="scss">

  .oneHead{
  // background-color: blue;
  height: 200px;
  width: 100%;
  display: flex;
  justify-content: space-around;
 }
  .oneHead>div{
    background-color: #fff;
    width: 280px;
    height: 150px;
    box-shadow: rgba(65, 52, 52, 0.15) 0 2px 4px 0;
    border: 1px solid rgba(101,109,119,0.16);
    border-radius: 4px;
    .xiaoTitle{
      font-size: .8rem;
      margin-top: 5px;
      height: 15%;
      width: 100%;
      font-weight: 600;
      color: #656d77;
      margin-left: 6px;
    }

    .oneContent{
      margin-top: 5px;
      font-size: 30px;
      span{
        font-size: 16px;
      }
      .text-green {
      color: #c66560 !important;
    }

  }
  }
  #twoContent{
    display: flex;
    flex-direction: column;
  }
  .two{
    width: 100%;
    height: 550px;
    span{
      font-weight: 600;
      color: #656d77;
      margin-top: 5px;
    }
    .twoLeft{
      width: 29%;
      height: 550px;
      // background-color: pink;
      margin-left: 70px;
      float: left;
      box-shadow: rgba(65, 52, 52, 0.15) 0 2px 4px 0;
      border: 1px solid rgba(101,109,119,0.16);
      border-radius: 4px;

     }
    .twoRight{
          width: 58%;
          height: 550px;
          margin-left: 471px;
          // background-color: skyblue;
          box-shadow: rgba(65, 52, 52, 0.15) 0 2px 4px 0;
          border: 1px solid rgba(101,109,119,0.16);
          border-radius: 4px;
          .twoRight_one{
            width: 100%;
            height: 190px;
            box-shadow: rgba(65, 52, 52, 0.15) 0 2px 4px 0;
            border: 1px solid rgba(101,109,119,0.16);
            border-radius: 4px;
          }

      }
  }

  .threeButtom{
    width: 89%;
    height: 350px;
    // background-color: yellowgreen;
    box-shadow: rgba(65, 52, 52, 0.15) 0 2px 4px 0;
    border: 1px solid rgba(101,109,119,0.16);
    border-radius: 4px;
    margin-top: 20px;
    margin-left: 70px;
    span{
      font-weight: 600;
      color: #656d77;
      margin-top: 5px;
    }
  }

</style>
